<template>
  <div class="workplaceOne" style="min-width:1370px;">
    <a-row :gutter="24" style="margin-bottom: 20px;" type="flex">
      <a-col :span="8">
        <a-row>
          <a-col :span="24" style="margin-bottom: 20px;">
            <a-card class="user-content" :bordered="false">
              <div class="avatar">
                <a-avatar :size="74" :src="avatar" />
              </div>
              <div class="content">
                <div class="content-title">{{ timeFix }}，{{ userInfo.UserName }}</div>
                <div class="content-company">
                  <span>{{ userInfo.DeptName }}</span>
                  <span class="m-l-8" style="color: #43CF7C;">
                    <a-icon type="check-circle" theme="filled" />已认证
                  </span>
                </div>
              </div>
            </a-card>
          </a-col>
          <a-col :span="24">
            <a-card class="task" :bordered="false">
              <div class="task-title" slot="title">
                <div class="title">我的任务</div>
                <ul class="status">
                  <li
                    class="status-tab"
                    :class="{ 'status-tab-active': activeKey === 1 }"
                    @click="activeKey = 1"
                  >全部</li>
                  <li class="circular">.</li>
                  <li
                    class="status-tab"
                    :class="{ 'status-tab-active': activeKey === 2 }"
                    @click="activeKey = 2"
                  >待执行</li>
                  <li class="circular">.</li>
                  <li
                    class="status-tab"
                    :class="{ 'status-tab-active': activeKey === 3 }"
                    @click="activeKey = 3"
                  >已完成</li>
                </ul>
              </div>
              <div v-show="activeKey === 1">
                <div class="task-content">
                  <!-- <div class="item">
                    <div class="txt">跨越山海寄深情跨越山海寄深情跨越山海寄深情跨越山海寄深情跨越山海寄深情跨越山海寄深情</div>
                    <div class="time">2022-09-22</div>
                  </div>-->
                  <a-empty />
                </div>
              </div>
              <div v-show="activeKey === 2">
                <div class="task-content">
                  <a-empty />
                </div>
              </div>
              <div v-show="activeKey === 3">
                <div class="task-content">
                  <a-empty />
                </div>
              </div>
            </a-card>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="8">
        <a-card class="message" :bordered="false" title="最新消息通知">
          <!-- <a slot="extra" href="#">查看更多</a> -->
          <ul class="message-content">
            <!-- <li class="item">
              <a-tag color="cyan">消息</a-tag>
              <span class="words">你说你想要逃，偏偏注定要落脚 心愿了 爱走了</span>
            </li>-->
            <a-empty></a-empty>
          </ul>
        </a-card>
      </a-col>
      <a-col :span="8">
        <a-card :bordered="false" title="快捷入口">
          <!-- <a slot="extra" href="#">管理</a> -->
          <!-- <div class="menu">
            <div class="item">
              <router-link to="/" tag="a">测试</router-link>
            </div>
          </div>-->
          <a-row :gutter="[16,16]" type="flex" align="middle" justify="center">
            <a-col
              :span="8"
              v-for="(item, index) in routesData"
              :key="index"
              class="a-flex a-flex-column a-row-center"
            >
              <router-link
                :to="item.path"
                tag="a"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div
                  class="a-flex a-row-center m-b-10"
                  style="width: 38px; height: 38px; background: rgba(62, 212, 167, 1); border-radius: 50%;"
                >
                  <a-icon
                    :type="item.meta.icon"
                    theme="filled"
                    style="color: #fff; font-size: 16px"
                  />
                </div>
                <span style="font-size: 14px;color: #333;">{{ item.meta.title }}</span>
              </router-link>
            </a-col>
          </a-row>
        </a-card>
        <a-card :bordered="false" title="最近访问" class="m-t-20">
          <a-row :gutter="[16,16]" type="flex">
            <a-col
              :span="8"
              v-for="(item, index) in latelyData"
              :key="index"
              class="a-flex a-flex-column a-row-center"
            >
              <router-link
                :to="item.path"
                tag="a"
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                "
              >
                <div
                  class="a-flex a-row-center m-b-10"
                  style="width: 38px; height: 38px; background: rgba(62, 212, 167, 1); border-radius: 50%"
                >
                  <a-icon
                    :type="item.meta.icon"
                    theme="filled"
                    style="color: #fff; font-size: 16px"
                  />
                </div>
                <span class="m-t-12" style="font-size: 14px;color: #333;">{{ item.meta.title }}</span>
              </router-link>
            </a-col>
          </a-row>
        </a-card>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="24">
        <a-card class="approval-content" :bordered="false">
          <div slot="title">
            <span>今日审批: {{ count }}</span>
          </div>
          <router-link to="/audit/myReview" slot="extra" tag="a">查看更多</router-link>
          <a-table :columns="columns" :data-source="auditData" size="middle">
            <span slot="serial" slot-scope="text, record, index">{{ index + 1 }}</span>
            <span slot="description" slot-scope="text">
              <ellipsis :length="20" tooltip>{{ text }}</ellipsis>
            </span>
            <span slot="result" slot-scope="text">
              <a-badge v-if="text === '通过'" status="success" text="通过" />
              <a-badge v-else-if="text === '不通过'" status="success" text="不通过" />
              <a-badge v-else status="processing" text="审核中" />
            </span>
            <span slot="date" slot-scope="text">{{ text | moment('YYYY-MM-DD') }}</span>
            <span slot="tag" slot-scope="text">
              <a-tag color="#2db7f5">{{ text }}</a-tag>
            </span>
            <!-- <span slot="progress">
              <a-progress :percent="30" />
            </span>-->
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { getAuditList } from '@/api/audit'
import { timeFix } from '@/utils/util'
const columns = [
  {
    title: '序号',
    align: 'center',
    width: '80px',
    scopedSlots: { customRender: 'serial' }
  },
  {
    title: '业务名称',
    align: 'center',
    dataIndex: 'YWMC'
  },
  {
    title: '流程名称',
    align: 'center',
    dataIndex: 'SHLCMC',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '流程类型',
    align: 'center',
    dataIndex: 'YWLX',
    scopedSlots: { customRender: 'tag' }
  },
  {
    title: '审核等级',
    align: 'center',
    dataIndex: 'SHDJ'
  },
  {
    title: '审核职位',
    align: 'center',
    dataIndex: 'SHZW'
  },
  {
    title: '审核结果',
    align: 'center',
    dataIndex: 'SHJG',
    scopedSlots: { customRender: 'result' }
  },
  {
    title: '原因',
    align: 'center',
    dataIndex: 'SHBZ',
    scopedSlots: { customRender: 'description' }
  },
  {
    title: '最后审核时间',
    align: 'center',
    dataIndex: 'SHSJ',
    scopedSlots: { customRender: 'date' }
  }
]
export default {
  data () {
    return {
      columns,
      avatar: 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png',
      activeKey: 1,
      routesData: [],
      latelyData: [],
      auditData: [],
      count: 0,
      timeFix: timeFix()
    }
  },
  computed: {
    userInfo () {
      return this.$store.getters.userInfo
    }
  },
  created () {
    if (this.userInfo.UserHeadPhoto) {
      this.avatar = process.env.VUE_APP_API_BASE_URL + this.userInfo.UserHeadPhoto
    }
    const routesArr = this.$store.getters.addRouters[0].children
    routesArr.forEach((item, index) => {
      console.log(item)
      if (item.children && item.children.length > 0 && index < 6) {
        this.routesData.push(item)
        if (index < 3) {
          this.latelyData.push(item)
        }
      }
    })
    this.fetchData()
    if (this.auditData.length) {
      this.$notification.info({
        message: '审核提示',
        description: `您今日审批数据当前共${this.auditData.length}条，请尽快处理`
      })
    }
  },
  methods: {
    fetchData () {
      getAuditList({
        pageIndex: '1',
        pageSize: '10',
        mode: '',
        userid: this.$store.getters.userid,
        strContent: {}
      }).then(res => {
        this.auditData = res.data
        this.count = res.count
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .workplaceOne {
    /deep/.ant-card-body {
      padding: 0 24px 24px;
    }
    .user-content {
      /deep/.ant-card-body {
        display: flex;
        align-items: center;
        padding: 16px 24px;
        .content {
          margin-left: 20px;
          .content-title {
            font-size: 16px;
          }
          .content-company {
            margin-top: 10px;
            font-size: 14px;
            color: #909399;
          }
        }
      }
    }
    .task {
      /deep/ .ant-card-head::before {
        display: block;
        content: '';
        width: 3px;
        height: 16px;
        background-color: #1890ff;
        position: absolute;
        left: 0;
        top: 20px;
      }
      .task-title {
        display: flex;
        align-items: center;
        .title {
          font-size: 16px;
          font-weight: 600;
        }
        .status {
          margin-left: 40px;
          margin-bottom: 0;
          li {
            float: left;
            cursor: pointer;
            padding: 0 4px;
          }
          .status-tab {
            &:hover {
              color: #40a9ff;
            }
          }
          .status-tab-active {
            color: #1890ff;
            text-shadow: 0 0 0.25px currentColor;
          }
          .circular {
            position: relative;
            bottom: 4px;
          }
        }
      }
      .task-content {
        height: 216px;
        overflow: hidden;
        .item {
          margin-bottom: 10px;
          display: flex;
          justify-content: space-between;
          .txt {
            width: 70%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .message {
      .message-content {
        height: 342px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        .item {
          margin-bottom: 10px;
          font-size: 14px;
          display: flex;
          align-content: space-between;
          &:last-child {
            margin-bottom: 0;
          }
          .words {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }
      }
    }
    .menu {
      display: flex;
    }
    /deep/.ant-card-head {
      border-bottom: 0;
    }
  }
</style>
